/* 横滑和竖滑手势封装*/
var bindSwipeEvent = function (dom,index,max,leftCallback,rightCallback) {
  console.log('进入的index',index)
  
  /*一 手势的条件*/
  /*1.必须滑动过 区分横滑和竖滑 */
  /*2.不能有页面抖动--即横滑时有竖滑，竖滑时有横滑*/
  /*3.横滑时，如果滑动的距离不大于屏幕的1/3 会吸附回去*/
  /*4.横滑时，如果滑动的距离大于屏幕的1/3 切换下一页或上一页*/
  /*5.左滑下一页，右滑上一页*/ 
// 二 动作拆解
  // 加过渡
  var addTransition=function () {
  	dom.style.transition = 'all 0.2s'//加入0.2秒的过渡效果
  	dom.style.webkitTransition = 'all 0.2s'//由于是css3，所以要做兼容
  }
  // 横滑 做X位移 (lists)
  var doTransformX=function (translateX) {
  	dom.style.transform='translateX('+translateX+'px)'
  	dom.style.webkitTransform = 'translateX('+translateX+'px)'
  }
  // 竖滑 做Y位移 是子容器做上下动作（list）
  var doTransformY=function (translateY) {
  	dom.children[index].style.transform='translateY('+ translateY+'px)'
  	dom.children[index].style.webkitTransform = 'translateY('+ translateY+'px)'
  }
  // 清过渡
  var removeTransition=function () {
  	dom.style.transition = 'none'
  	dom.style.webkitTransition = 'none'
  }
  //阻止默认事件的函数
  var  preHandler = function(e){e.preventDefault()}
// 三 初始设定
  // var index=index//接受过来的列表id
  var isMoveX = false //横滑
  var isMoveY=true //竖滑
  var startX = 0
  var startY = 0 
  var distanceX = 0
  var distanceY = 0
  var nowY=[] //记录各个页面高度list
  for(let i=0;i<=max;i++){//各个页面高度初始化
    nowY[i]=0 
  } 
  var startTime=0//开始时间
  var width=dom.parentNode.offsetWidth//容器宽度

  

  //问题现象：当切换到该页面id不等于0时，无法上下滑动，非要先横滑一次，才可以上下滑动，上下滑是dom的子元素的滑动，
  //这个现象有两种情况
  //注意：
  // 1，点击时
  //       这个结束的index是上次滑动结束的index，并不是点击的id，
  //       因此当你横滑后，在上下滑动时，窗口是上次滑动结束的index的内容，不是自己id的内容。

  //解决：在点击方法中调用本模块进行位置的切换，传入当前id即可，问题的原因在于自己又另外定义了图片页面切换的方法和本模块不一致，无法进行参数的共享。

  // 2，路由切换过来时
  //      这个结束的index是路由的id，因此当你横滑后，在上下滑动时，窗口是自己id的内容。
  //要解决的问题分两个：
  //  1，点击时，要把id给到滑动模块的index，上面已解决。
  //  2，不需要横滑即可上下滑动
  //解决：
  // 首先根据传过来的index做一次位移，定位到相应页面，即可。
  doTransformX(-index*width) 

// 四 事件绑定 核心  
  dom.addEventListener('touchstart',function (e) {
    //增加阻止默认的浏览器事件，如果没有会报错，在start的时候就要阻止。不是在move的时候，以前在move的时候阻止，没有用。
    dom.addEventListener('touchmove',preHandler,false)
    // 记录开始位置
    startX = e.touches[0].clientX
    startY = e.touches[0].clientY
    //记录开始时间
    startTime=Date.now()
   
  })
  
  dom.addEventListener('touchmove',function (e) {
   
    var moveX = e.touches[0].clientX
    var moveY = e.touches[0].clientY
    var moveTime=Date.now()//移动的时间
    distanceX = moveX - startX
    distanceY = moveY- startY
    // 判断横滑还是竖滑，以滑动200ms的时间间隔做判断（10ms间隔不行）
    if((moveTime-startTime)<300){
      //如果滑动的横向距离大于纵向距离，并且横滑的距离大于10px，就判断为横滑，否则就是竖滑
      if(Math.abs(distanceX)>Math.abs(distanceY) && Math.abs(distanceX)>10){ 
        //是横滑不是竖滑
        isMoveX=true
        isMoveY=false
      }else{
        //是竖滑不是横滑
        isMoveX=false
        isMoveY=true
      }
    }
   
    //横滑动作
    if(isMoveX){ 
      // 清除过渡
      removeTransition()
      // 只做x方向的位移 当前移动的位置
      var translateX=-index*width+distanceX
      doTransformX(translateX)
    }
    if(isMoveY){
    //竖滑动作
      
      //开启默认事件,即只做Y方向的滑动
      // dom.removeEventListener('touchmove',preHandler,false)
      // 清过渡
      removeTransition()
      // 只做y方向的位移 
      //当前移动的位置
      doTransformY(nowY[index]+distanceY)
    }
  },false)
 
  
  
  dom.addEventListener('touchend',function (e) {
    //横滑结束 动作
    if(isMoveX){
      if(Math.abs(distanceX) > (width/3)){
        if(distanceX > 0){
          index--
          if(index<0){index=0}
          rightCallback && rightCallback.call(this,e,index)
          /*该调用形式是
           1，先判断rightCallback存不存在，不存在，就不会执行&&后面的rightCallback.call(this,e)。
           2，存在就执行rightCallback.call(this,e)
           3，使用.call（）调用和（）调用的区别在于作用域，this是什么，
            3.1 call（）的作用域中，this是dom对象
            3.2 （）调用的作用域中，this是window
          */
        }else{
          index++
          if(index>max){index=max}
          leftCallback && leftCallback.call(this,e,index)
        }
        // 清过渡
        removeTransition()
        // 做位移
        doTransformX(-index*width) 
      }else{
        //吸附回去
        //加过渡
        addTransition()
        //做位移
        doTransformX(-index*width)  
      }   
    } 
    //竖滑结束动作
    if(isMoveY){
      //1，拿父容器的高度
      var hf=dom.parentNode.offsetHeight
      console.log('hf',hf)
      
      //2，拿子容器的高度
      var hs=dom.children[index].offsetHeight
      console.log('hs',hs)
      
      //3,改变当前高度
      nowY[index] +=distanceY
      
      //4,判断边界
      if(nowY[index]>0){nowY[index]=0}
      if(nowY[index]<(hf-hs)){ nowY[index]=hf-hs}
      console.log('nowY['+index+']',nowY)
      // console.log(e)
      //加过渡
      addTransition()
      //5，最后移动的距离
      doTransformY(nowY[index])
    }
    console.log('结束的index',index)
    /*重置参数 很重要，不然会影响下一次滑动*/
    isMoveX = false
    isMoveY = true
    startX = 0
    startY = 0
    distanceX = 0
    distanceY = 0
    
  })
}
export default bindSwipeEvent